<template>
    <div class="common-layout" style="height: 100%;">
      <el-container style="height: 100%;">
        <el-header class="header">

            <div style="display: flex; border-radius: 10px; justify-content: center; align-items: center;">
              <div>                <el-button @click="$router.push('/')" type="primary" link><span style="font-size: larger;">首 页</span> </el-button>
             </div>
            </div>

        <div class="rightside">

            <div>
              <el-avatar @click="dialogVisible=true" size="large" :src="store.getUser()?.headPortrait" />
            </div>
            <div>
                  <span style="font-size: large;">  用户名：{{ store.getUser()!.userName }}</span>
                  <div><span  style="font-size: large;" > 余额: {{ store.getUser()?.money }} </span> </div>
            </div>


          </div>

        </el-header>






        <el-container style="height: 100%;">
          <el-aside width="200px" style="background-color: #545c64; height: 100%;">
            

            <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"

        class="el-menu-vertical-demo"
        text-color= "#fff"
        default-active="3"
       >

      <el-menu-item @click="$router.push('/user/trolley')" index="1">
          <el-icon><icon-menu /></el-icon>
          <span>购物车</span>
        </el-menu-item>



        <el-menu-item @click="$router.push('/user/order')" index="2">
          <el-icon><setting /></el-icon>
          <span>订单</span>
        </el-menu-item>

        <el-menu-item @click="$router.push('/user/info')" index="3">
          <el-icon><icon-menu /></el-icon>
          <span>我的信息</span>
        </el-menu-item> 

        <el-menu-item @click="$router.push('/user/safe')" index="4">
          <el-icon><icon-menu /></el-icon>
          <span>账户安全</span>
        </el-menu-item> 

      </el-menu>



          </el-aside>

          <el-main>
            <RouterView/>
          </el-main>
        </el-container>
      </el-container>
    </div>







    <el-dialog
    v-model="dialogVisible"
    title="修改头像"
    width="30%"
    >
    
    <el-upload
    ref="upload"
    class="upload-demo"
    action= "http://localhost:7529/user/test" 
    :data="{
        username:store.getUser()?.userName
    }"
    :limit="1"
    :on-exceed="handleExceed"
    :on-success="upSuccess"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选择一个图片</el-button>
    </template>


  </el-upload>


    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpload">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  </template>


<script setup lang="ts">
import {ref} from 'vue'
import { BASE_URL } from '@/api/ApiCons';
import { useCounterStore } from '@/stores/counter';
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const action = ref()
action.value = BASE_URL + "/user/test"
console.log(action.value);
const upload = ref<UploadInstance>()
const circleUrl = ref()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const submitUpload = () => {
    dialogVisible.value = false
    console.log(upload.value);
  upload.value!.submit()
}

const upSuccess = (res:any) =>{
store.changeH(res.data)
 }

const store = useCounterStore()

circleUrl.value = store.getUser()?.headPortrait
const dialogVisible = ref(false)





</script>

<style scoped >
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: rgb(239, 239, 239);
}
.header2{
  display: flex;
  justify-content: right;
  background-color: rgb(239, 239, 239);
}
.rightside {
    display: flex;
    flex-direction: row;
    justify-content: right;
    background-color: rgba(248, 248, 248, 0.383);
    height: 100%;
    border-radius: 10px;
}
</style>